<!DOCTYPE html>
<html>

<body>
  <canvas id="c1" width="800" height="800">

  </canvas>
  <script>
    // rect(x,y,w, h) 建立以点x,y为左顶点, w为宽,h为高的矩形路径
    // strokeRect(x,y,w,h) 绘制 x,y为左顶点, w宽h高的矩形
    // fillRect (x,y,w,h) 方法以(x, y) 为左上角, (x+w, y+h)为右下角填充矩形
    // clearRect (x, y, w, h) 用来清除(x,y)为左上角,(x+w, y+h)为右下角的矩形区域
    var p1 = document.getElementById('c1');
    var c1 = p1.getContext("2d");
    var width = p1.width, height = p1.height;
    // 计算最中间的矩阵左上角的坐标
    var x0ff = width * 0.5 + 5, y0ff = height * 0.5 + 5;
    for (var i = 0; i < 8; i++) {
      c1.strokeRect(x0ff - 10 * i, y0ff - 10 * i, i * 20 + 10, i * 20 + 20);
    }

  </script>
</body>

</html>